<!--
 * @Description:
 * @Author: hui
 * @Date: 2022-02-17 18:23:45
 * @LastEditTime: 2022-03-31 10:43:25
-->
<template>
	<div class="publicInfo">
        <el-form ref="infoFormRef" :model="infoForm" status-icon :rules="infoRules" class="demo-ruleForm" label-width="280px">
            <el-form-item  prop="openingBankName" label="开户银行:" >
                <el-select v-model="infoForm.openingBankName" filterable clearable placeholder="请选择" class="span8" @change="changeBank">
                    <el-option
                    v-for="item in bankList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item  prop="companyName" label="银行开户名:">
                <el-input :disabled="true" v-model="infoForm.companyName" placeholder="请填写银行开户名" class="span8"/>
            </el-form-item>
            <el-form-item  prop="bankNo" label="企业银行卡账户:">
                <el-input v-model="infoForm.bankNo" placeholder="请填写企业对公银行账号" class="span8"/>
            </el-form-item>
            <el-form-item class="span10">
                <el-button :loading="isSaveLoading"  type="primary" @click="handleSubmit"> 填写完成，提交认证 </el-button>
                <el-button type="default" @click="handleBack">返回</el-button>
            </el-form-item>
        </el-form>
	</div>
</template>
<script setup lang="ts">
import { AppspaceCompany } from '@/ajax/index';
import type { ElForm } from 'element-plus';
import { ComponentInternalInstance, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
	const { appContext } = getCurrentInstance() as ComponentInternalInstance;
	const proxy = appContext.config.globalProperties;
	type FormInstance = InstanceType<typeof ElForm>;
	// 路由
	const router = useRouter();
	// vuex
	const store = useStore();
	// 登录
	const infoFormRef = ref();
    const isSaveLoading = ref(false);
	const infoForm = reactive({
		'bankName': ``,
		'bankNo': ``,
        'companyName':``,
        'openingBankName': ``,
        'id': ``
	});
    const bankList = [
    {
        value: '313224000015',
        label: '抚顺银行',
    },
    {
        value: '313224000793',
        label: '抚顺银行八纬路支行',
    },
    { value: '105100000017', label: '中国建设银行', },
    { value: '102100099996', label: '中国工商银行', },
    { value: '102100000072', label: '中国工商银行北京国家文化与金融合作示范区金街支行', },
    { value: '103100024015', label: '中国农业银行', },
    { value: '308584000013', label: '招商银行', },
    { value: '104100000004', label: '中国银行', },
    { value: '301290000007', label: '交通银行', },
    { value: '301100000777', label: '交通银行北京育惠东路支行', },
    { value: '301100000355', label: '交通银行股份有限公司北京永定路支行', },
    { value: '301100000120', label: '交通银行北京西区支行', },
    { value: '403100000004', label: '中国邮政储蓄银行', },
    { value: '306581000003', label: '广发银行', },
    { value: '302100011000', label: '中信银行', },
    { value: '307584007998', label: '平安银行', },
    { value: '305100000013', label: '中国民生银行', },
    { value: '303100000006', label: '中国光大银行', },
    { value: '310290000013', label: '上海浦东发展银行', },
    { value: '309391000011', label: '兴业银行', },
    { value: '304100040000', label: '华夏银行', },
    { value: '325290000012', label: '上海银行', },
    { value: '313100000013', label: '北京银行', },
    { value: '313332082914', label: '宁波银行', },
    { value: '313301099999', label: '江苏银行', },
    { value: '313331000014', label: '杭州银行', },
    { value: '314653000011', label: '重庆农村商业银行', },
    { value: '319361000013', label: '徽商银行', },
    { value: '313301008887', label: '南京银行', },
    {
        value: '0000000000',
        label: '测试银行',
    }
        
    ]
    const userInfo = computed(() => store.state.user.userInfo);
    
    let props = defineProps({
        type:{                            // 父组件v-model绑定的值
            type: String,
        },
        companyName:{
            type: String,
        },
        formData:{
            type: Object
        }
    })
    const emit = defineEmits(['selectActiveSign','handleFatherSubmit']);
 
	const infoRules = {
		'openingBankName': [
			{
				'required': true,
				'message': `请选择开户银行`,
				'trigger': `blur`
			},
		],
		'bankNo': [
			{
				'required': true,
				'message': `请输入企业银行卡账户`,
				'trigger': `blur`
			},
		]
	};
    //提交认证
    const handleSubmit = ()=>{
        infoFormRef.value.validate(async (valid: boolean) => {
			if (valid) {
				isSaveLoading.value = true;
                let sentData:any = {}
                sentData = JSON.parse(JSON.stringify(infoForm));
                
				let result = {} as any;
				result = await AppspaceCompany(sentData);
				if (result.succ) {
                    const activeSign = 'SubmitInfo'
                    const type = 'next'
                    const resultCode = result.content.code || ''
                    let status = ''
                    if(props.formData){
                        props.formData.id = result.content.companyId
                    }
                    infoForm.id = sentData.id = result.content.companyId
                    if(resultCode == 'FP00000'){
                        //提交审核成功
                        status = `1`
                        emit('selectActiveSign', activeSign, type, '', status, sentData)
                    }else if(resultCode == 'KYC2009' || resultCode == 'KYC2016' || resultCode == 'KYC2019'||resultCode == `FP09703`) {
                        //打款失败页面
                        status = `2`
                        emit('selectActiveSign', activeSign, type, '', status, sentData)
                    }else if(resultCode === 'FP03333' || resultCode === 'FP09008'){
                        ElMessage.error(result.content.message);
                    }
                    isSaveLoading.value = false;
                   
				} else {
					isSaveLoading.value = false;
				}
            }
		});
    };
    //获取当前用户信息
    const getUserInfo = async ()=>{
        await store.dispatch(`user/getUserInfoAction`)
        .then(res => {
            console.log(res,"resgetUserInfo=======");
        })
        .catch(err => {
            console.log(err);
        });
    }

    const handleBack = ()=>{
        const activeSign = 'Information'
        const type = 'back'
        emit('selectActiveSign', activeSign,type)
    }
    
    const changeBank = (val:string)=>{
        let res: any = bankList.find((item: any)=>{
            return item.value == val
        })
        infoForm.bankName = res.label
    }
    
    const created = () => {
        Object.assign(infoForm, props.formData)
    };
    created();
</script>
<style lang="scss" scoped>
	.publicInfo {
		@extend %relative;
		background-image: url(../assets/images/login-bg.png);
        .remark{
            border-top: 1px solid #E8EAEC;
            padding-top: 8px;
        }
        .login-remark{
            color: $project_them;
            cursor: pointer;
        }
        ::v-deep .el-upload{
            width: 100%;
        }
        ::v-deep .el-upload-dragger{
            background-color: #F3F4F5;
            height: 112px;
            width: 100%;
            border: 0px solid #d9d9d9;
            .el-upload__text{
                margin-top: -20px;
            }
            .el-icon--upload{
                margin: 20px 0 16px;
            }
        }
        .el-icon--upload{
            color: $project_them;
            width: 34px;
            height: 37px;
        }
	}
     
</style>
